<template>
	<view>
		<view class="flex padding-sm bg-white">
			<view class="flex-sub text-left ">
				<image src="../../static/new/live-logo.png" class="liveinfo-logo"></image>
				<text class="lineinfo-title-left">唐圣文化</text>
			</view>
			<view class="flex-sub text-right">
				<image src="../../static/new/search.png" class="liveinfo-logo-right"></image>
				<text class="lineinfo-title-left padding-right-sm solids-right">关注</text>
				<text class="lineinfo-title-left">个人中心</text>
			</view>
		</view>
		<view>
			<video id="myVideo"
				src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"
				@error="videoErrorCallback" ></video>
		</view>
		<scroll-view scroll-x class="bg-white nav solid-bottom">
			<view class="flex text-center">
				<view class="cu-item flex-sub" @tap="tabSelect" :class="TabCur==1?'sel':''" :data-id="1">
					<text :class="TabCur==1?'sel-text':'unsel'">互动</text>
				</view>
				<view class="cu-item flex-sub" @tap="tabSelect" :class="TabCur==2?'sel':''" :data-id="2">
					<text :class="TabCur==2?'sel-text':'unsel'">排行榜</text>
				</view>
				<view class="cu-item flex-sub" @tap="tabSelect" :class="TabCur==3?'sel':''" :data-id="3">
					<text :class="TabCur==3?'sel-text':'unsel'">介绍</text>
				</view>
			</view>
		</scroll-view>
		<block v-if="TabCur==1">
			<view class="cu-list menu-avatar">
				<view class="cu-item">
					<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view>
					<view class="content">
						<view class="text-black">兰格助手</view>
					</view>
				</view>
			</view>
			<view class="hd-content">
				<view class="bg-white padding-sm" style="border-radius: 10rpx;">
					<view class="padding-bottom-xs text-lg">欢迎进入直播间：</view>
					<view class="padding-bottom-xs text-lg">1、请自行调节手机音量至合适的状态。</view>
					<view class="padding-bottom-xs text-lg">2 直播界面显示讲师发布的内容，听众发言可以在讨论区或以弹幕形式查看。</view>
				</view>
			</view>
			<view class="foot">
				<view class="flex">
					<view class="basis-sm">
						<view class="flex bg-white margin-top-xs">
							<input type="text" :value="text" class="searchys" @confirm="confirm" placeholder="说点什么吧~"
								confirm-type="search" @input="getkeyword"></input>
							<!-- <view @tap="searchShop" class="text-right">提问</view> -->
						</view>
					</view>
					<view class="basis-lg">
						<view class="flex">
							<view class="flex-sub padding-sm">
								<image src="../../static/new/sp-before.png" style="width: 40rpx;height: 10rpx;"></image>
							</view>
							<view class="flex-sub padding-sm">
								<image src="../../static/new/sp.png" style="width: 50rpx;height:50rpx;"></image>
							</view>
							<view class="flex-sub padding-sm">
								<image src="../../static/new/gwc.png" style="width: 50rpx;height: 50rpx;"></image>
							</view>
							<view class="flex-sub padding-sm">
								<image src="../../static/new/ds.png" style="width: 50rpx;height: 50rpx;"></image>
							</view>
							<view class="flex-sub padding-sm text-center">
								<view style="color:#FF2727;">2920</view>
								<image src="../../static/new/dz.png" style="width: 40rpx;height: 40rpx;"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</block>
		<block v-if="TabCur==2">
			<view class="phb-bg">
				<view class="padding-lg text-center">
					<image src="../../static/new/yqdrb.png" style="width: 260rpx;height:50rpx;"></image>
				</view>
				<view class="flex padding-sm" v-for="(item,index) in 5" :key="index">
					<view class="flex-sub text-left">
						<image v-if="index==0" src="../../static/new/one.png" class="phb-mc-img"></image>
						<image v-else-if="index==1" src="../../static/new/two.png" class="phb-mc-img"></image>
						<image v-else-if="index==2" src="../../static/new/three.png" class="phb-mc-img"></image>
						<text v-else class="other-phb">{{index+1}}</text>
						<image src="../../static/new/lan.png" class="phb-mc-img-sec"></image>
						<text class="text-df">嬉笑妹倾城</text>
					</view>
					<view class="flex-sub text-right">
						邀请112位好友
					</view>
				</view>
			</view>
			<view style="height: 800rpx;"></view>
			<view class="foot solids-top">
				<view class="flex padding-sm">
					<view class="flex-treble">
						<view class="cu-list menu-avatar">
							<view class="cu-item">
								<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view>
								<view class="content" style="width: 100%;">
									<view class="text-grey">倾城笑妹喜</view>
									<view class="text-gray text-sm">邀请好友看直播，争夺上榜机会
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="flex-sub">
						<button class="cu-btn round yq-btn">邀请</button>
					</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
	    data() {
	        return {
	            TabCur: 2,
	        }
	    },
	    onReady: function(res) {
	        // #ifndef MP-ALIPAY
	        this.videoContext = uni.createVideoContext('myVideo')
	        // #endif
	    },
	    methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
			}
	    }
	}

</script>

<style scoped>
	.liveinfo-logo {
		width: 50rpx;
		height: 50rpx;
		vertical-align: middle;
	}

	.liveinfo-logo-right {
		width: 40rpx;
		height: 40rpx;
		vertical-align: middle;
	}

	.lineinfo-title-left {
		padding-left: 20rpx;
		font-size: 32rpx;
		vertical-align: middle;
	}
	uni-video {
	    width: 100%;
	}
	.nav .cu-item {
	    font-size: 36rpx;
	}
	.sel{
		color: #282728;
	}
	.sel-text{
		padding-bottom: 20rpx;
		border-bottom: 4rpx solid #0000DF;
	}
	.unsel{
		color: #A0A1A1;
	}
	.cu-list.menu-avatar>.cu-item {
		background-color: transparent;
		height: 120rpx;
	}
	.hd-content{
		margin-top: -20rpx;
		margin-left:150rpx;
		margin-right: 30rpx;
	}
	.searchys {
		padding-left: 15rpx;
		height: 70rpx;
		width: 100%;
		margin-left: 10rpx;
		font-size: 26rpx;
		border-radius: 50rpx;
		background-color: #F1F1F1;
	}
	.foot{
		position: fixed;
		width: 100%;
		left: 0;
		bottom: 0;
		background-color: white;
	}
	.phb-bg{
		background-image: url(@/static/new/phb-bg.png);
		background-size: 100% 100%;
		height:200rpx;
	}
	.phb-mc-img{
		width: 50rpx;
		height: 50rpx;
		margin-right: 20rpx;
		vertical-align: middle;
	}
	.phb-mc-img-sec{
		width: 80rpx;
		height: 80rpx;
		vertical-align: middle;
		margin-right: 20rpx;
	}
	.other-phb{
		font-size: 36rpx;
		padding:0 39rpx 0 15rpx;
		color: black;
		vertical-align: middle;
	}
	.yq-btn{
		background-image: url(@/static/new/yq.png);
		background-size: 100% 100%;
		width: 180rpx;
		height: 70rpx;
		color: #ffffff;
		font-size: 34rpx;
	}
</style>
